<template>
  <view class="container">
    <view class="editor-container">
      <!-- Markdown 编辑区 -->
      <textarea 
        class="editor" 
        v-model="markdownContent" 
        placeholder="输入 Markdown 文本..."
      />
      
      <!-- 实时预览区 -->
      <view class="preview">
        <text class="preview-title">预览：</text>
        <rich-text :nodes="htmlContent"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
  // 引入 markdown 解析库（需安装 marked.js）
  //import marked from 'marked';
  import * as marked from 'marked'; // 导入整个模块

  export default {
    data() {
      return {
        markdownContent: '# Hello Markdown!\n\n- 列表项1\n- 列表项2\n\n**加粗文本**',
      };
    },
    computed: {
      // 实时解析 Markdown 为 HTML
      htmlContent() {
        //return marked(this.markdownContent);
		// 使用 marked.parse()（marked v4+ 的推荐方法）
        return marked.parse(this.markdownContent);		
      },
    },
  };
</script>

<style>
  .container {
    padding: 20rpx;
  }
  .editor-container {
    display: flex;
    flex-direction: column;
    height: 80vh;
  }
  .editor {
    flex: 1;
    border: 1px solid #ddd;
    padding: 20rpx;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
  .preview {
    flex: 1;
    border: 1px solid #ddd;
    padding: 20rpx;
    overflow-y: auto;
  }
  .preview-title {
    display: block;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
</style>
